/*test.css*/
.mask-wrapper {
  position: relative;
  overflow: hidden;
}

/*一开始遮罩层高度为0*/
.mask-wrapper:hover .mask-inner {
  top: 0;
}


/*遮罩层颜色*/
.mask-inner {
  background: #EBEBEB;
}

 .mask-wrapper {
  position: relative;相对定位
  overflow: hidden;隐藏
} 

.mask-inner {
  position: absolute;
  opacity: 0.8;
  top: 100%;
  width: 80%;
  height: 80%;   
  margin: 5% 0px 0px 10%;
  transition: top ease 1000ms;
   
   
 }

.mask-margin {
  margin: 10px;
}

.myflex {
  display: flex;
  flex-wrap:wrap;
}

.mycol {
  flex: 1;
}

.pd10 {
  padding: 1rem;
}

.vcenter {
  justify-content: center;
  align-items: center;
}

.myresponsive {
  display: block;
  max-width: 100%;
  height: auto;
}
/*flex布局*/
/* @media screen and (min-width:1200px) {
  .mycol {
    min-width: 290px;
  }

}

@media screen and (max-width:1200px) and (min-width:900px) {
  .mycol {
    min-width: 290px;
    background-color: blue;
  }

}

@media screen and (max-width:899px) and (min-width:600px) {
  .mycol {
    min-width: 290px;
    background-color: yellow;
  }

}

@media screen and (max-width:600px) {
  .mycol {
    min-width: 590px;
    background-color: red;
  }

} */